<template>
    <div>
      <!-- 面包屑 -->
      <el-bread></el-bread>
      <!-- 添加按钮 -->
      <el-button @click="add" class="btnInfo" type="primary" size="small" plain
        >添加</el-button
      >
      <!-- 列表展示 -->
      <v-list @edit="edit"></v-list>
      <!-- 弹框展示 -->
      <v-dialog ref='diaInfo' @cancel="cancel" :isShow="isShow" :isAdd="isAdd"></v-dialog>
    </div>
  </template>
  
  <script>
  //引入封装好的列表
  import vList from "./list.vue";
  //引入封装好的弹框
  import vDialog from "./dialog.vue";
  export default {
    data() {
      return {
        isShow: false,
        isAdd: true, //它的作用是用于区分是否为添加或者编辑
      };
    },
    components: {
      vList,
      vDialog,
    },
    methods: {
      //封装一个点击添加出现弹框事件
      add() {
        //点击 打开弹框
        this.isShow = true;
        //告诉弹框你是一个添加
        this.isAdd = true;
      },
      //封装父组件关闭方法
      cancel(e) {
        this.isShow = e;
      },
      //封装一个打开编辑弹框事件
      edit(e) {
        //点击 打开弹框
        this.isShow = true;
        //告诉弹框你是一个编辑
        this.isAdd = false;
        this.$refs.diaInfo.lookup(e)
      },
    },
  };
  </script>
  
  <style scoped>
  .btnInfo {
    margin: 20px 10px;
  }
  </style>
  